<template>
  <el-dialog
    v-model="dialogVisible"
    title="活动参与"
    destroy-on-close
    width="500"
  >
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>{{ activityInfo.activityName }}</span>
        </div>
      </template>
      <div class="text item">
        <el-row><label>简介：</label>{{ activityInfo.content }}</el-row>
        <el-row><label>地点：</label>{{ activityInfo.site }}</el-row>
        <el-row><label>主办方：</label>{{ activityInfo.sponsor }}</el-row>
        <el-row><label>活动人数：</label>{{ activityInfo.members }}</el-row>
      </div>
      <template #footer>
        <div>
          {{ activityInfo.startTime }}
          -
          {{ activityInfo.endTime }}
        </div>
      </template>
    </el-card>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          v-if="showButton"
          :loading="disabledButton"
          type="primary"
          @click="participateActivity"
          >参加活动</el-button
        >
        <el-button
          v-else
          type="primary"
          :loading="disabledButton"
          @click="participateActivity"
          >退出活动</el-button
        >
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { PropType } from "vue";
import { IActivity } from "@/api/business/activity/types";
import {
  addActivityUserAPI,
  deleteActivityUserAPI,
  queryIsParticipateAPI,
} from "@/api/business/activity-user";
import { IActivityUser } from "@/api/business/activity-user/types";

//-----------组件变量-----------
const props = defineProps({
  //子组件接收父组件传递过来的值
  activityInfo: {
    type: Object as PropType<IActivity>,
    required: true,
  },
});
const activityUserId = ref<string | undefined>();
const dialogVisible = ref(false);
const showButton = ref(true);
const disabledButton = ref(false);
const loading = ref(false);

//-----------组件操作-----------
/**
 * 查询是否已经参与了活动
 */
const queryIsParticipate = () => {
  loading.value = true;
  queryIsParticipateAPI(props.activityInfo?.activityId)
    .then(({ data }) => {
      if (data) activityUserId.value = data.activityUserId;
      showButton.value = !data;
    })
    .finally(() => {
      loading.value = false;
    });
};
/**
 * 参与或取消参与活动
 */
const participateActivity = () => {
  loading.value = true;
  disabledButton.value = true;
  if (showButton.value) {
    addActivityUserAPI(props.activityInfo?.activityId.toString())
      .then(() => {
        showButton.value = !showButton.value;
        ElMessage({
          message: "参与活动成功.",
          type: "success",
        });
      })
      .finally(() => {
        queryIsParticipate();
      });
  } else {
    deleteActivityUserAPI(activityUserId.value)
      .then(() => {
        showButton.value = !showButton.value;
        ElMessage({
          message: "退出活动成功.",
          type: "success",
        });
      })
      .finally(() => {
        queryIsParticipate();
      });
  }
  setTimeout(() => {
    disabledButton.value = false;
  }, 10000);
  loading.value = false;
};

onMounted(() => {
  queryIsParticipate();
});

/**
 * 显示弹窗
 */
const showDialog = () => {
  dialogVisible.value = true;
};

defineExpose({ showDialog });
</script>

<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 480px;
}
</style>
